
<template>
  <div class="sysdicttype-container">
    <!--    查询表单-->
    <Search ref="search" :SearchConfig="SearchConfig" :searchData="searchData">
      <template #buttons>
        <ButtonGroup :ButtonConfig="ButtonConfig" :select-row="selectRow" @reset="reset"
                     @query="query"
                     @openDialog="openDialog"
                     @delete="deleteDictType"/>
      </template>
    </Search>
    <!--    数据网格-->
    <div class="data-grid">
      <el-table
          :data="gridData"
          :highlight-current-row="true"
          border
          height="520px"
          row-key="id"
          @expand-change="handleExpandChange"
          :expand-row-keys="expandRowKeys"
          @row-click="rowClick"
          style="width: 100%">
        <el-table-column
            type="index"
            fixed
            label="序号"
            width="50">
        </el-table-column>

        <el-table-column
            prop="dictName"
            label="类型名称">
        </el-table-column>

        <el-table-column
            label="字典项" type="expand" width="70">
          <template slot-scope="props">
            <div>
              <div style="height: 10px; background-color: antiquewhite"></div>
              <el-table
                  stripe
                  :data="dictData.filter(data => !search || data.value.toLowerCase().includes(search.toLowerCase()))"
                  :highlight-current-row="true"
                  style="width: 100%;overflow: scroll;">
                <el-table-column
                    type="index"
                    fixed
                    label="序号"
                    width="50">
                </el-table-column>

                <el-table-column
                    prop="value"
                    label="字典码">
                </el-table-column>

                <el-table-column
                    prop="label"
                    label="字典值">
                </el-table-column>

                <el-table-column
                    prop="isDefault"
                    label="是否默认值">
                </el-table-column>

                <el-table-column
                    prop="order"
                    label="排序">
                </el-table-column>

                <el-table-column
                    prop="createUserName"
                    label="创建者">
                </el-table-column>

                <el-table-column
                    prop="createTime"
                    label="创建时间">
                </el-table-column>

                <el-table-column
                    prop="updateUserName"
                    label="更新者">
                </el-table-column>

                <el-table-column
                    prop="updateTime"
                    label="更新时间">
                </el-table-column>

                <el-table-column
                    prop="remark"
                    label="备注">
                </el-table-column>
                <el-table-column
                    width="220px"
                    align="right">
                  <template slot="header" slot-scope="scope">
                    <div style="display: flex;">
                      <el-input
                          v-model="search"
                          size="mini"
                          placeholder="输入字典码搜索"/>
                      <el-button @click="openDictDataDialog(1)" style="margin-left: 8px;" size="mini" type="primary" icon="el-icon-plus" circle/>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="openDictDataDialog(scope.row)">{{ $t('Dict.edit') }}</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">{{ $t('Dict.del') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="height: 10px; background-color: antiquewhite"></div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
            prop="dictType"
            label="类型标识">
        </el-table-column>

        <el-table-column
            prop="createUserName"
            label="创建者">
        </el-table-column>

        <el-table-column
            prop="createTime"
            label="创建时间">
        </el-table-column>

        <el-table-column
            prop="updateUserName"
            label="更新者">
        </el-table-column>

        <el-table-column
            prop="updateTime"
            label="更新时间">
        </el-table-column>

        <el-table-column
            prop="remark"
            label="备注">
        </el-table-column>
      </el-table>
    </div>

    <!--    分页工具-->
    <page-comp :pageOptions="pageOptions"/>

    <!--    对话框-->
    <add-or-update-dialog @close="handleDialogClose" @submit="submitForm" :options="dialogOptions">
      <template #form>
        <Form ref="formDialog" :form-data="data" :form-config="config"></Form>
      </template>
    </add-or-update-dialog>
  </div>
</template>

<script>
import PageComp from '@/components/pagination'
import Search from '@/components/search'
import ButtonGroup from '@/components/ButtonGroup'
import {
  listDictType,
  getDictDataByType,
  addDictType,
  updateDictType,
  checkDictTypeExist,
  deleteDictData,
  addDictData,
  updateDictData,
  deleteDictType
} from "@/api/dictApi";
import {SearchConfig,ButtonConfig,FormConfig,FormData,FormConfig1,FormData1} from "@/views/system/dict/sysdicttype.config";
import AddOrUpdateDialog from "@/components/AddOrUpdateDialog/index.vue";
import Form from '@/components/Form'

export default {
  name: 'Dict',
  components: {PageComp, Search,ButtonGroup,AddOrUpdateDialog,Form},
  dicts: [],
  data() {
    return {
      pageOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pagesizes: [10, 20, 30, 40],
        sizeChangeCallback(pageSize) {
          this.pageSize = pageSize
        },
        currentChangeCallback(currPage) {
          this.currentPage = currPage
        }
      },
      gridData: [],
      searchData: {
        dictName: null,
        dictType: null,
      },
      SearchConfig,
      ButtonConfig,
      FormConfig,
      FormData,
      FormConfig1,
      FormData1,
      data: null,
      config: null,
      dictData: [],
      expandRowKeys: [],
      selectRow: null,
      dialogOptions: {
        title: '',
        isVisitable: false,
        width: '30%',
        type: null
      },
      search: ''
    }
  },
  watch: {
    'pageOptions.currentPage': function (ne,old) {
      this.query()
    },
    'pageOptions.pageSize': function (ne,old){
      this.query()
    }
  },
  methods: {
    query() {
      listDictType(this.searchData,this.pageOptions.currentPage,this.pageOptions.pageSize).then(success => {
        this.gridData = success.data
        this.pageOptions.total = success.total
        this.selectRow = null
      })
    },
    submitForm() {
      this.$refs.formDialog.validate(() => {
        if (this.dialogOptions.type === 1) {
          // 添加字典类型
          addDictType(this.data).then(success => {
            this.handleDialogClose()
          })
        } else if (this.dialogOptions.type === 0) {
          // 更新字典类型
          updateDictType(this.data).then(success => {
            this.handleDialogClose()
          })
        } else if (this.dialogOptions.type === 2) {
            // 添加字典项
          addDictData(this.data).then(success => {
            this.handleDialogClose()
          })
        } else if (this.dialogOptions.type === 3) {
            // 更新字典项
            updateDictData(this.data).then(success => {
              this.handleDialogClose()
            })
        }
      });
    },
    openDialog(val) {
      this.data = this.FormData
      this.config = this.FormConfig
      if(val === '1') {
        // add
        this.dialogOptions.title = '添加'
        this.dialogOptions.type = 1
        this.FormConfig.rules.dictType.push({validator: this.validateDictType,trigger: 'blur'})
      } else {
        // edit
        this.copyField(this.selectRow,this.FormData)
        this.dialogOptions.title = '编辑'
        this.dialogOptions.type = 0
        this.FormConfig.rules.dictType.pop()
      }
      this.dialogOptions.isVisitable = true
    },
    openDictDataDialog(row) {
      this.data = this.FormData1
      this.config = this.FormConfig1
      if(row === 1) {
        // add
        this.data.type = this.selectRow.id
        this.dialogOptions.title = '添加'
        this.dialogOptions.type = 2
      } else {
        // edit
        this.copyField(row,this.FormData1)
        this.dialogOptions.title = '编辑'
        this.dialogOptions.type = 3
      }
      this.dialogOptions.isVisitable = true
    },
    validateDictType(rule,value,callback) {
      checkDictTypeExist(value).then(success => {
        if (success) {
          callback(new Error('字典类型已经存在，请重新输入'))
        } else {
          callback()
        }
      })
    },
    reset() {
      this.$refs.search.resetFields()
    },
    handleExpandChange(row,expandRows) {
      if (expandRows.length) {
        this.expandRowKeys = []
        this.expandRowKeys.push(row.id)
      }
      this.selectRow = row
      this.getDictData(this.selectRow.dictType)
    },
    handleDialogClose() {
      if (this.dialogOptions.type === 0 || this.dialogOptions.type === 1) {
        this.query()
      } else {
        this.getDictData(this.selectRow.dictType)
      }
      this.dialogOptions.isVisitable = false
      this.$refs.formDialog.resetFormData()
    },
    getDictData(dictType) {
      getDictDataByType(dictType).then(success => {
        this.dictData = success[this.selectRow.dictType]
      })
    },
    rowClick(row,column,event) {
      this.selectRow = row
    },
    handleDelete(row) {
      this.$confirm('确认删除该字典项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictData(row).then(success => {
          this.getDictData(this.selectRow.dictType)
        })
      }).catch(() => {
        return
      });
    },
    deleteDictType(row) {
      this.$confirm('确认删除该字典类型及其所有字典项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = []
        ids.push(row.id)
        deleteDictType(ids).then(success => {
          this.query()
          this.selectRow = null
        })
      }).catch(() => {
        return
      });
    }
  },
  mounted() {
    listDictType().then(success => {
      this.gridData = success.data
      this.pageOptions.total = success.total
    })
  }
}
</script>

<style scoped>
.sysdicttype-container {
  position: relative;
  height: calc(100% - 31px);
}

.sysdicttype-container > .data-grid {
  box-sizing: border-box;
  padding: 0 20px 10px 20px;
}
</style>